﻿@model  Carpool1.Models.CarpoolInfo
@{
    ViewBag.Title = "Detail";
    Layout = "~/Views/Shared/_Layout.cshtml";



    bool isLongDistance = Model.InfoType == 1;
    bool isShortCommute = Model.InfoType == 2;
}

<!-- 引入百度地图API -->
@section Head {
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=24661721a13ef054b221f80ab69b36e8"></script>
    <style>
        #carpoolMap {
            width: 100%;
            height: 350px;
            border: 1px solid #ddd;
            margin-top: 10px;
        }

        .action-btn {
            margin-right: 10px;
        }
    </style>
}

<div class="container my-4">
    <div class="card">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
            <h3>@Model.StartCity → @Model.EndCity</h3>
            <span class="badge @(Model.InfoType == 1 ? "bg-primary" : "bg-success")">
                @(Model.InfoType == 1 ? "长途拼车" : "短途拼车")
            </span>
        </div>
        <div class="card-body">
            <div class="row">
                <!-- 左侧信息 -->
                <div class="col-md-7">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <p><strong>出发时间：</strong>@Model.DepartureTime.ToString("yyyy-MM-dd HH:mm")</p>
                            <p><strong>车型：</strong>@GetCarTypeText(Model.CarType)</p>
                            <p><strong>容纳人数：</strong>@Model.Capacity 人</p>
                            <p><strong>已乘人数：</strong>@Model.ParticipantCount 人</p>
                        </div>
                        <div class="col-md-6">
                            <p>
                                <strong>费用方式：</strong>
                                @if (Model.FeeType == 1)
                                {
                                    <span>面议</span>
                                }
                                else if (Model.FeeType == 2)
                                {
                                    <span>@Model.Fee 元/位</span>
                                }
                               
                            </p>
                            <p><strong>发布时间：</strong>@Model.PublishTime.Value.ToString("yyyy-MM-dd HH:mm")</p>
                            <p>
                                <strong>发布者：</strong>
                                @(Model.User.RealName ?? Model.User.PhoneNumber.Substring(0, 3) + "****" + Model.User.PhoneNumber.Substring(7))
                            </p>
                        </div>
                    </div>

                    <div class="border-top pt-3">
                        <h5>车主留言</h5>
                        <p class="mt-2">@Model.Message</p>
                    </div>

                    <!-- 操作按钮 -->
                    <div class="mt-4">
                        @if (Session["UserID"] != null)
                        {
                            <button type="button" class="btn btn-success action-btn" onclick="applyCarpool(@Model.InfoID)">
                                <i class="fa fa-user-plus"></i> 申请加入
                            </button>

                            <button type="button" class="btn btn-info action-btn" id="followBtn" onclick="toggleFollow(@Model.InfoID)">
                                <i class="fa fa-heart-o"></i> 关注
                            </button>

                            <!-- 编辑/删除按钮：仅发布者可见 -->
                            {
                                int currentUserId = (int)Session["UserID"];
                                if (currentUserId == Model.PublisherID)
                                {
                                    <button class="btn btn-warning action-btn" onclick="editCarpool(@Model.InfoID)">
                                        <i class="fa fa-pencil"></i> 编辑
                                    </button>
                                    <button class="btn btn-danger action-btn" onclick="deleteCarpool(@Model.InfoID)">
                                        <i class="fa fa-trash"></i> 删除
                                    </button>
                                }
                            }
                        }
                        else
                        {
                            <a href="@Url.Action("Login", "Account")" class="btn btn-primary action-btn">
                                <i class="fa fa-sign-in"></i> 登录后操作
                            </a>
                        }
                    </div>
                </div>

                <!-- 右侧地图 -->
                <div class="col-md-5">
                    <div class="map-control mb-3">
                        <span>出发地：</span>
                        <input id="txtStart" type="text" value="@Model.StartCity" class="form-control form-control-sm" style="width: 120px; display: inline-block;">
                        <span>目的地：</span>
                        <input id="txtEnd" type="text" value="@Model.EndCity" class="form-control form-control-sm" style="width: 120px; display: inline-block;">
                        <button id="btnSearch" class="btn btn-sm btn-primary ml-2" onclick="searchRoute()">
                            <i class="fa fa-search"></i> 搜索路线
                        </button>
                    </div>

                    <div id="carpoolMap"></div>
                    <div id="routeResult" class="mt-2 p-2 bg-light rounded text-sm"></div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        // 百度地图初始化
        function initBaiduMap() {
            var map = new BMap.Map("carpoolMap");
            map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
            map.enableScrollWheelZoom(true);
            return map;
        }

        // 搜索路线
        function searchRoute() {
            var map = initBaiduMap(); // 初始化地图
            var start = document.getElementById("txtStart").value;
            var end = document.getElementById("txtEnd").value;

            if (!start || !end) {
                document.getElementById("routeResult").innerHTML = "<p class='text-danger'>请填写出发地和目的地</p>";
                return;
            }

            document.getElementById("routeResult").innerHTML = "<p class='text-muted'><i class='fa fa-spinner fa-spin'></i> 规划路线中...</p>";

            var driving = new BMap.DrivingRoute(map, {
                renderOptions: { map: map, autoViewport: true, panel: "routeResult" }
            });
            driving.search(start, end);
        }

        // 申请加入
        function applyCarpool(infoId) {
            // 补充 AJAX 逻辑...
            alert("申请加入功能待实现");
        }

        // 关注/取消关注
        function toggleFollow(infoId) {
            // 补充 AJAX 逻辑...
            alert("关注功能待实现");
        }

        // 编辑拼车
        function editCarpool(infoId) {
            window.location.href = '@Url.Action("Edit", "Carpool", new { id = Model.InfoID })';
        }

        // 删除拼车
        function deleteCarpool(infoId) {
            if (confirm("确定删除？")) {
                // 补充 AJAX 逻辑...
                alert("删除功能待实现");
            }
        }

        // 页面加载后初始化地图
        window.onload = function() {
            searchRoute(); // 自动搜索路线
        };
    </script>
}

@functions {
    private string GetCarTypeText(int type)
    {
        switch (type)
        {
            case 1: return "轿车";
            case 2: return "SUV";
            case 3: return "MPV";
            case 4: return "客车";
            default: return "其他";
        }
    }
}

